<template>
    <div class="app-container">
      <div class="topform">
        <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                  autocomplete="off"/>
        <el-button type="primary" style="margin-left: 10px" :loading="btnloading" @click="getlistdata(true)"
                   icon="el-icon-search">搜索
        </el-button>
        <el-button type="primary" @click="adddialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
      </div>
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                header-cell-class-name="tableheader">
        <el-table-column align="center" label="图样名称" width="200">
          <template slot-scope="scope">
            {{ scope.row.image_name }}
          </template>
        </el-table-column> 
        <el-table-column align="center" label="封面">
                <template slot-scope="scope">
                    <el-image 
                            style="width: 100px; height: 100px"
                            :src="scope.row.image_path"
                            :preview-src-list="[scope.row.image_path]">
                        </el-image> 
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型" width="50">
          <template slot-scope="scope">
            {{ scope.row.image_type_name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序" width="40">
          <template slot-scope="scope">
            {{ scope.row.sort }}
          </template>
        </el-table-column> 
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      
      <div class="pagination">
        <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog title="保存类型" :visible.sync="adddialog" width="35%" :close-on-click-modal="false">
        <el-form :model="addform" ref="addform" :rules="rule" label-width="100px">
          <el-form-item label="图样名称：" prop="image_name">
            <el-input clearable v-model="addform.image_name" autocomplete="off"/>
          </el-form-item> 
          <el-form-item label="选择图样类型" prop="image_type_id"> 
            <el-select  style="width:150px;" v-model="addform.image_type_id" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in image_type_list"
                        :key="item"
                        :label="item.image_type_name"
                        :value="item.image_type_id">
                    </el-option>
                    </el-select>
          </el-form-item> 
          <el-form-item label="上传图样：" prop="image_path">
                    <el-upload
                        class="avatar-uploader"
                        :action= "action_url"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="addform.image_path" :src="addform.image_path" class="avatar_new" style="max-height:200px">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>
          <el-form-item label="排序编号：" prop="sort">
            <el-input clearable v-model="addform.sort" autocomplete="off"/>
          </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn">保存</el-button>
        </div>
      </el-dialog>  
    </div>
  </template>
  
  <script>  
  import * as imageConversion from 'image-conversion'
  export default {
    data() {
      return {
        action_url: this.$api + "/tools/save_file",
        btnloading: false, 
        image_type_list:[], 
        form: {
          serchKeyword: '',
          page: 1,
          pagesize: 20
        },
        addform: {
            image_id: '',
            image_name: '', 
            image_path:'',
            sort:0
        }, 
        rule: {
            type_name: [
            {required: true, message: '此项为必填项'},
          ], 
        },
        list: null,
        alllist: null,
        total: 0,
        listLoading: true,
        adddialog: false,
        editdialog: false,
        addicondia: false,
        editicondia: false
      };
    }, 
    created() { 
      this.getlistdata(); 
      this.gettypelistdata();
    },
    methods: {
      getlistdata(isquery) {
        this.listLoading = true;
        if (isquery === true) {
          this.form.page = 1
        }
        this.$post(this.$api + '/nw/get_nw_image_pagelist', {
          'serchKeyword': this.form.serchKeyword,
          'page': this.form.page,
          'pagesize': this.form.pagesize
        }, false, this)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }, 
      gettypelistdata() { 
        this.$post(this.$api + '/nw/get_nw_image_type_pagelist', {
          'serchKeyword': '',
          'page': 1,
          'pagesize': 30
        }, false, this)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.image_type_list = res.rows; 
            } else {
              this.$notify({
                title: '获取类型失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }, 
      addbtn() {
        this.listLoading = true;
        this.$post(this.$api + '/nw/save_nw_image', this.addform)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.adddialog = false;
              this.addform = {
                image_id: '',
                image_name: '', 
                image_path:'',
                image_type_id:'',
                sort:0
              };
              this.getlistdata(); 
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      },
      openedit(item) {
            this.adddialog = true;
            for(var i in this.addform)
            { 
                 this.addform[i] = item[i];  
            } 
      }, 
      delbtn(item) {
        this.$confirm('确认删除？?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$get(this.$api + '/nw/del_nw_image', {
            'image_id': item.image_id
          })
            .then((res) => {
              this.listLoading = false;
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.getlistdata();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        })
      },
      handleSizeChange(v) {
        this.form.pagesize = v;
        this.getlistdata();
      },
      handleCurrentChange(v) {
        this.form.page = v;
        this.getlistdata();
      },
      handleAvatarSuccess(res, file) {
                console.log(res);
                //this.cover_pic = URL.createObjectURL(file.raw);
                if(res.code ==0)
                { 
                    this.addform.image_path = res.data.url;
                }
                else{
                    this.$notify({
                        title: '上传失败',
                        message: res.msg,
                        type: 'error'
                    });
                }
        },
        beforeAvatarUpload(file) {  
            // 上传之前校验
            return new Promise((resolve, reject) => {
                //压缩到400KB,大于200KB的图片都会进行压缩，小于则不会
                imageConversion.compressAccurately(file, 200).then(res => { // console.log(res)
                res = new File([res], file.name, { type: res.type, lastModified: Date.now() }) 
                resolve(res)
                })
            }) 
        }
    }
  };
  </script>
  
  